<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>酒店申请</title>
        <link rel="icon" th:href="@{/static/favicon.ico}" />
        <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/main.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/viewer.min.css}" />
        <script th:src="@{/static/js/vue.min.js}"></script>
        <script th:src="@{/static/js/axios.min.js}"></script>
        <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
        <script th:src="@{/static/js/viewer.min.js}"></script>
        <script th:src="@{/static/bootstrap/js/bootstrap.bundle.js}"></script>
        <script th:src="@{/static/admin/js/config.js}"></script>
    </head>

    <body>
        <style>
            .info {
                margin-top: 24px;
                height: 100%;
                overflow: auto;
                display: flex;
                flex-direction: column;
            }
            .each:not(:last-child) {
                margin-bottom: 24px;
            }
            .card {
                border: 0;
                flex-direction: row;
            }
            h5 {
                color: black;
                font-weight: bold;
            }
            .card-body {
                padding: 1rem;
                display: flex;
                justify-content: space-between;
                border: 1px solid rgba(0, 0, 0, 0.125);
            }
            img {
                cursor: pointer;
                border-radius: 4px;
            }
            .message {
                display: block;
                max-height: 71.7px;
                overflow-y: auto;
            }
            .sidebar {
                display: none;
                border: 1px solid #ccc;
                padding: 1rem;
            }
            .extend {
                border: 1px solid #ccc;
                padding: 10px;
                display: flex;
            }
            .click:hover {
                cursor: pointer;
                background-color: #ddd;
            }
            .click:active {
                background-color: #ccc;
            }
        </style>
        <main>
            <div class="main pt-4 pb-5">
                <div class="search" style="padding: 0; padding-bottom: 28px; border-bottom: 1px solid #ccc">
                    <form class="form-inline float-left" th:action="@{/applicate/index/history}" method="get">
                        <div class="form-group">
                            <select name="option">
                                <option value="hotel_name" selected>酒店名称</option>
                                <option value="status">申请状态</option>
                                <option value="submit_time">提交时间</option>
                            </select>
                            <input style="margin: 0 4px" type="text" name="value" value="" class="form-control" placeholder="输入关键字" />
                        </div>
                        <button type="submit" class="btn btn-primary"><i class="iconfont"> </i>搜索</button>
                    </form>
                </div>
                <div class="info">
                    <h1 th:if="${#lists.isEmpty(list)}" class="display-4" style="margin: auto">暂无提交申请</h1>
                    <div class="each" th:unless="${#lists.isEmpty(list)}" th:each="applicate : ${list}">
                        <div class="card">
                            <div class="extend click" title="点击查看提交信息">
                                <i class="iconfont arrow" style="margin: auto; font-size: 32px; rotate: 0deg">&#xe66c;</i>
                            </div>
                            <div class="card-body">
                                <div style="max-width: 76%">
                                    <h5 th:text="${applicate.title}">更新酒店设施</h5>
                                    <span th:text="${applicate.getMessage()}">提交于 2023-08-01 16:34:09 ，共计更新 7 张图片，2 段文本</span>
                                </div>
                                <span style="font-size: 24px; font-weight: bold; margin: auto 0" th:text="${applicate.hotelName}">西安古城西智选假日酒店</span>
                            </div>
                            <div class="extend" th:switch="${applicate.status}">
                                <i class="iconfont" th:case="true" style="color: green; font-size: 46px; margin: auto 0">&#xe6ee;</i>
                                <i class="iconfont" th:case="false" style="color: red; font-size: 46px; margin: auto 0">&#xe6ea;</i>
                                <i class="iconfont" th:case="null" style="color: black; font-size: 46px; margin: auto 0">&#xe6d9;</i>
                            </div>
                        </div>
                        <div class="sidebar" th:if="${#strings.endsWith(applicate.title,'设施')}" th:object="${applicate.getMap()}">
                            <h5 th:text="*{get('facilityName')}"></h5>
                            <span class="message" th:text="*{get('description')}"></span>
                        </div>
                        <div class="sidebar" th:if="${#strings.endsWith(applicate.title,'房型')}" th:object="${applicate.getTypeMap()}">
                            <div style="display: flex">
                                <div th:unless="${applicate.status == false}" class="float-left pic" style="position: relative">
                                    <img class="pic-img" height="104" alt="photo" th:src="@{*{get('photo')}}" />
                                    <span class="img_num" tabindex="0" th:text="|*{get('size')}张|">3张</span>
                                    <img style="display: none" height="0" th:src="@{${path}}" th:each="path : *{#strings.arraySplit(get('url'),'|')}" />
                                </div>
                                <div th:if="${applicate.status == false}" style="background-color: #eaeaea; padding-bottom: 11px"><i class="iconfont" style="margin: 29px; font-size: 46px">&#xe66b;</i><br /><span style="margin: 12px">图片已删除</span></div>
                                <div style="margin-left: 10px">
                                    <h5 th:text="*{get('typeName')}"></h5>
                                    <span class="message" th:text="*{get('message')}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <script>
            $(".pic").viewer();
            $(".click").click(function () {
                $(this).parent().next().slideToggle();
                var arrow = $(this).find(".arrow");
                arrow.animate({ rotate: 90 - parseInt(arrow.css("rotate").substring(0, 2)) + "deg" }, 300);
            });
            $("img").on("error", function () {
                $(this).parent().replaceWith('<div style="background-color: #eaeaea; padding-bottom: 11px"><i class="iconfont" style="margin: 29px; font-size: 46px">&#xe6b4;</i><br /><span style="margin: 12px">图片不存在</span></div>');
            });
        </script>
    </body>
</html>
